import React, { Component } from 'react'
import _ from 'underscore'
import { Form, Input, Table, Button, Modal, DatePicker, Row, Col, Popconfirm } from 'antd';
const FormItem = Form.Item;
import moment from 'moment';
import {message} from "antd/lib/index";
import { ContentHeader } from '../../wrapper'
import {connect} from "react-redux";
import {doAjaxPost} from "../../common/fetch-ajax";


const columns = [{
    title: '品名',
    dataIndex: 'goodsName',
}, {
    title: '图片',
    dataIndex: 'goodsPic',
    render: text => <img src={text} className="goods-img"></img>
}, {
    title: '价格',
    dataIndex: 'goodsPrice',
},{
    title: '操作',
    dataIndex: 'goodsId',
    render: text =>
        <_Doing data={text}/>
}];

class GoodsDetail extends Component {
    componentWillMount() {
        let ids = this.props.renderdata.goodsList;
        if(ids.length>0){
            fetchGoods(ids).then( (list)=> {
                for (let g of list) {
                    g.key = g.goodsId;
                }
                this.props.getGoodsDetail(list, ids);
            })
        }else{
            this.props.getGoodsDetail([], []);
        }
    }

    render() {
        const rowKeys = [];
        const rowSelection = {
            onChange: this.onSelectChange,
            hideDefaultSelections: true,
            selections: false
            //onSelection: this.onSelection,
        };

        const { goodslist, trigerLayer, title, triggerGoodsDetail} = this.props;

        return (
            <Modal title={title} visible={true} onCancel={triggerGoodsDetail} width="800px" footer={[
                <Button key="back" size="large" onClick={triggerGoodsDetail}>
                    关闭
                </Button>
            ]}>
                <div className="table-operations">
                    <Button onClick={trigerLayer}>添加商品</Button>
                </div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={goodslist}/>

            </Modal>
        );
    }
}

const _GoodsDetailEx = connect(
    state => {
        return {
            renderdata: state.renderdata,
            goodslist: state.goodslist
        }
    },
    dispatch => {
        return {
            getGoodsDetail(data) {
                dispatch({
                    type: 'set-goods-table-data',
                    val: data
                })
            },
            trigerLayer: () => {
                dispatch({
                    type: 'trigger-goods-layer'
                });
            },
            triggerGoodsDetail: () => {
                dispatch({
                    type: 'trigger-goodsDetail-layer'
                });
            }
        }
    }
)(GoodsDetail);

export default _GoodsDetailEx;

class Doing extends Component {
    removeGood(id){
        const ids = this.props.renderdata.goodsList;
        removeByValue(ids, id)
        if(ids.length>0){
            fetchGoods(ids).then( (list)=> {
                for (let g of list) {
                    g.key = g.goodsId;
                }
                this.props.getGoodsDetail(list, ids);
            })
        }else{
            this.props.getGoodsDetail([], []);
        }
    }
    render() {

        const { renderdata, removeGood } = this.props;
        const gid = this.props.data;

        return <Popconfirm placement="leftBottom" okType="danger" title="确认将该商品移除?" onConfirm={ ()=>this.removeGood(gid) } okText="确定" cancelText="取消">
                <Button>删除</Button>
            </Popconfirm>
    }
}

const _Doing = connect(
    state => {
        return {
            renderdata: state.renderdata,
        }
    },
    dispatch => {
        return {
            removeGood(data) {
                dispatch({
                    type: 'remove-goods-form-renderData',
                    val: data
                })
            },
            getGoodsDetail(data, ids) {
                dispatch({
                    type: 'set-goods-table-data',
                    val: data
                })
                dispatch({ // 已选中商品id数组merge到提交数据中
                    type: 'set-renderdata-goodslist',
                    val: ids
                });
            }
        }
    }
)(Doing);

function removeByValue(arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
}

const fetchGoods = function(ids){
    return new Promise(function (resolve, reject) {
        doAjaxPost({
            url: 'https://dingdian-ppe.parllay.cn/wxserver/activity/getGoodsListByIds',
            data: {
                "data": {
                    "storeNo": user.storeNo,
                    "ids": ids
                }
            },
            success: (result) => {
                let param = JSON.parse(result);
                if (param.success) {
                    param = param.result;
                    resolve(param.data);
                } else {
                    reject("数据加载失败");
                }
            },
            error: (error) => {
                reject("数据加载失败");
            }
        })
    })
}